﻿@{
    ViewBag.Title = "Chart";
    Layout = "~/Views/Shared/Mastert.cshtml";
}
<link href="~/css/dhtmlxchart.css" rel="stylesheet" />
<style>
    .label{
        background-color:#ffffff;
        -moz-border-radius:4px;
        -ms-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
        height:15px;
        line-height:15px;
        font-size: 9px;
        width:25px;
        text-align:center;
        color: #000000;
    font-family: Tahoma;
    font-size: 11px;
    }

</style>
<script src="~/js/dhtmlxchart.js"></script>
<script src="~/js/testdata.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var chart1 = new dhtmlXChart({
            view: "line",
            container: "chartplace",
            value: "#companyA#",
            item: {
                borderColor: "#1293f8",
                color: "#ffffff"
            },
            line: {
                color: "#1293f8",
                width: 3
            },
            tooltip: {
                template: "#companyA#"
            },
            offset: 0,
            xAxis: {
                template: "#month#"
            },
            yAxis: {
                start: 0,
                step: 1,
                end: 10,
                template: function (value) {
                    return value % 5 ? "" : value
                }
            },
            padding: {
                left: 35,
                bottom: 20
            },
            origin: 0,
            legend: {
                layout: "x",
                width: 75,
                align: "center",
                valign: "bottom",
                marker: {
                    type: "round",
                    width: 15
                },
                values: [
                { text: "company A", color: "#3399ff" },
                { text: "company B", color: "#66cc00" }
                ]
            }
        });
        chart1.addSeries({
            value: "#companyB#",
            item: {
                borderColor: "#66cc00",
                color: "#ffffff"
            },
            line: {
                color: "#66cc00",
                width: 3
            },
            tooltip: {
                template: "#companyB#"
            }
        })
        chart1.parse(companies, "json");

        var barChart1 = new dhtmlXChart({
            view: "bar",
            container: "bargraph",
            value: "#sales#",
            color: "#color#",
            width: 30,
            radius: 0,
            gradient: "rising",
            tooltip: {
                template: "#sales#"
            },
            xAxis: {
                template: "'#year#",
                title: "Year"
            },
            yAxis: {
                title: "Profit"
            }
        });
        barChart1.parse(dataset_colors, "json");

        var Radarchart = new dhtmlXChart({
            container: "RadarchartDiv",
            view: "radar",
            value: "#companyA#",
            tooltip: {
                template: "#companyA#"
            },
            color: "#3399ff",
            line: {
                color: "#3399ff",
                width: 1
            },
            fill: "#3399ff",
            xAxis: {
                template: "#month#"
            },
            disableItems: true,
            alpha: 0.2,
            legend: {
                layout: "y",
                width: 110,
                align: "right",
                valign: "middle",
                marker: {
                    width: 15,
                    radius: 3
                },
                values: [
                { text: "company A", color: "#3399ff" },
                { text: "company B", color: "#66cc00" }
                ]
            }
        });
        Radarchart.addSeries({
            value: "#companyB#",
            tooltip: {
                template: "#companyB#"
            },
            fill: "#66cc00",
            line: {
                color: "#66cc00",
                width: 1
            }
        });
        Radarchart.parse(companies, "json");

        var pieChart = new dhtmlXChart({
            view: "pie",
            container: "pieChart",
            value: "#sales#",
            labelOffset: -5,
            label: function (obj) {
                var sum = pieChart.sum("#sales#");
                var text = Math.round(parseFloat(obj.sales) / sum * 100) + "%";
                return "<div class='label' style='border:1px solid " + obj.color + "'>" + text + "</div>";
            },
            color: "#color#",
            legend: {
                width: 75,
                align: "right",
                valign: "middle",
                template: "#month#"
            }
        });
        pieChart.parse(month_dataset, "json");
    }

    
</script>
        	<div class="contentinner content-charts">
            
                <div class="row-fluid">
                    <div class="span6">
                    	<h4 class="widgettitle">Line Chart</h4>
                        <br>
                        <div id="chartplace" style="height: 300px; padding: 0px; position: relative;"></div>
                    </div>
                    <div class="span6">
                    	<h4 class="widgettitle">Bar Chart</h4>
                        <br>
                        <div id="bargraph" style="height: 300px; padding: 0px; position: relative;"></div>
                    </div>
                </div><!--row-fluid-->
                
                <br><br>
                
                <div class="row-fluid">
                    <div class="span6">
                    	<h4 class="widgettitle">Radar Chart</h4>
                       	<br>
                        <div id="RadarchartDiv" style="height: 300px; padding: 0px; position: relative;"></div>
                        <br>
                        
                    </div>
                    
                    <div class="span6">
                    	<h4 class="widgettitle">Pie Chart</h4>
                        <br>
                        <div id="pieChart" style="height: 300px; padding: 0px; position: relative;"></div>
                    </div>
                </div><!--row-fluid-->
                
              <div class="divider30"></div>
                
             
                
            </div><!--contentinner-->
        
